<template>
  <div>
    <div class="block">
      <el-carousel style="min-width:1220px;min-height:300px;" trigger="click" :height="imgHeight + 'px'" :interval="5000">
        <el-carousel-item v-for="(item, index) in bannerData" :key="index">
          <img ref="imgHeight" :src="item.image" @load="loadimg">
        </el-carousel-item>
      </el-carousel>
    </div>
		<div class="case-box">
			<div class="content">
				<div class="pub-title">
					<div class="top-title">
						<img src="../assets/image/title01.png">
						<span>精品案例</span>
					</div>
					<p>各种装修风格实景案例、灵感无处不在</p>
				</div>
				<p class="more"><router-link tag='a' :to="'/imgcase'" >More +</router-link></p>
				<div class="wrap-imgcase">
					<div class="imgcase-box" v-for="(item, index) in schemeData" :key="index" @click="$axios.goCase(item.schemeIndex)">
						<div class="cb-img">
							<img :src="item.image">
						</div>
						<div class="cd-text">
							<span class="cb-title">{{item.title}}</span>
							<span class="cb-sum">{{item.schemeImageCount}}张</span>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="company-box">
			<div class="content">
				<div class="pub-title">
					<div class="top-title">
						<img src="../assets/image/title02.png">
						<span>装修公司</span>
					</div>
					<p>甄选城中优质装修公司，丰富选择实现理想</p>
				</div>
				<p class="more"><router-link tag='a' :to="'/company'" >More +</router-link></p>
				<div class="wrap-companybox">
					<div class="imgcompany-box" v-for="(item, index) in companyData" :key="index" @click="$axios.goCompany(item.companyIndex)">
						<div class="imb-img">
							<img :src="item.image">
						</div>
						<div class="imb-text">{{item.title}}</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="design-box">
			<div class="content">
				<div class="pub-title">
					<div class="top-title">
						<img src="../assets/image/title03.png">
						<span>设计师</span>
					</div>
					<p>汇集顶尖设计师，引流设计潮流</p>
				</div>
				<p class="more"><router-link tag='a' :to="'/design'" >More +</router-link></p>
				<!-- 最多4个 -->
				<div class="wrap-designbox">
					<div class="des-box" v-for="(item, index) in designData" :key="index" @click="$axios.goDesign(item.designerIndex)">
						<div class="head-img">
							<img :src="item.headImage">
							<p>{{item.name}}</p>
						</div>
						<p class="des-detail">{{item.describe}}</p>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="progress-box">
			<div class="progress-title">
				<p>装修流程</p>
				<span></span>
			</div>
			<ul class="content">
				<li><img src="../assets/image/progress01.png"><span>发布需求</span></li>
				<li><img src="../assets/image/progress02.png"><span>等待回访</span></li>
				<li><img src="../assets/image/progress03.png"><span>上门量房</span></li>
				<li><img src="../assets/image/progress04.png"><span>签订合同</span></li>
				<li><img src="../assets/image/progress05.png"><span>设计方案</span></li>
				<li><img src="../assets/image/progress06.png"><span>选购材料</span></li>
				<li><img src="../assets/image/progress07.png"><span>施工</span></li>
				<li><img src="../assets/image/progress08.png"><span>验收</span></li>
			</ul>
		</div>
		<!-- 侧边栏 -->
<!-- 		<div class="sub-bar">
			<ul>
				<li class="sub-chat">
					<span>在线咨询</span>
				</li>
				<li class="go-top" @click="goTop"></li>
			</ul>
		</div> -->
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      designData: [],
      companyData: [],
      schemeData: [],
      bannerData: [],
      imgHeight: '',
      count: 0
    }
  },
  methods: {
    getDesign () {
      var that = this
      that.$axios.request('/Home/Index', {
        Address: that.$store.state.city,
        SchemePageSize: 8,
        CompanyPageSize: 4,
        DesignerPageSize: 4
      })
        .then((res) => {
          if (res.code === 0) {
            that.designData = res.data.designers
            that.companyData = res.data.companys
            that.schemeData = res.data.schemes
          }
        })
    },
    getAd () {
      var that = this
      that.$axios.request('/AdvertInfo/GetAdvert', {
        Position: '1',
        Pageindex: 0,
        Pagelimit: 3
      })
        .then((res) => {
          if (res.code === 0) {
            that.bannerData = res.data.datalist
          }
        })
    },
    loadimg () {
      this.count ++ 
      if (this.count === 1) {
        this.$nextTick(() => {
          this.imgHeight = this.$refs.imgHeight[0].height-4
        })
      }
    },
    goTop () {
    	(function smoothscroll(){
    		var currentScroll = document.documentElement.scrollTop || document.body.scrollTop
    		if (currentScroll > 0) {
    		     window.requestAnimationFrame(smoothscroll)
    		     window.scrollTo (0,currentScroll - (currentScroll/5))
    		}
			})()
    }
  },
  mounted () {
    var that = this
    that.getAd()
    that.$axios.getCity(function(){
    	that.getDesign()
    })
    window.onresize = function temp() {
      that.imgHeight = that.$refs.imgHeight[0].height
    }
  }
}
</script>
